<template>
  <div>
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :before-close="cancel"
      :show-close="true"
      title="外部线索维护"
      width="80%"
    >
      <!-- 查询条件 -->
      <div class="detailForm">
        <el-form
          ref="editDiaForm"
          :rules="rules"
          :inline="true"
          :model="search"
          label-width="90px"
        >
          <el-row :gutter="8">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="name" label="客户名称">
                <el-input
                  v-model="search.name"
                  placeholder="客户名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="telephone" label="电话">
                <el-input
                  v-model="search.telephone"
                  placeholder="电话"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="gender" label="性别">
                <el-select v-model="search.gender" placeholder="请选择">
                  <el-option label="未知" value="未知"/>
                  <el-option label="男" value="男"/>
                  <el-option label="女" value="女"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="CREATED_AT" label="线索创建时间">
                <el-input
                  v-model="search.CREATED_AT"
                  placeholder="线索创建时间"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="clue_status" class="clue-statu">
                <span slot="label" style="color:#F56C6C">线索状态</span>
                <el-select v-model="search.clue_status" placeholder="请选择">
                  <el-option :disabled="rowData.clue_status!='0'" label="新线索" value="0"/>
                  <el-option label="有意向" value="1"/>
                  <el-option label="无意向" value="2"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="clue_source" label="线索渠道">
                <el-select v-model="search.clue_source" disabled placeholder="请选择">
                  <el-option v-for="item in clueSourceOptions" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="clue_type" label="线索类型">
                <el-select v-model="search.clue_type" disabled placeholder="请选择">
                  <el-option v-for="item in clueTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="app_name" label="流量来源">
                <el-input
                  v-model="search.app_name"
                  placeholder="流量来源"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="flow_type" label="流量类型">
                <el-select v-model="search.flow_type" disabled placeholder="请选择">
                  <el-option v-for="item in flowTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="action_type" label="互动类型">
                <el-select v-model="search.action_type" disabled placeholder="请选择">
                  <el-option v-for="item in actionTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="series_id" label="产品小类">
                <r-select
                  v-model="search.series_id"
                  selectid="series_id"
                  selectname="series_name"
                  url="/productDisplay/getTmSeies"
                  model="DMSCLOUD_VEHICLE"
                  placeholder="请选择车系"
                  filterable
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealer_name" label="经销商">
                <el-input v-model="search.dealer_name" readonly>
                  <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="dealerOpen"/>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="province_id" label="省份">
                <el-select v-model="search.province_id" clearable placeholder="请选择" @change="changeProvince">
                  <el-option v-for="item in provinceOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id + ''"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="city_id" label="城市">
                <el-select v-model="search.city_id" clearable placeholder="请选择" @change="changeCity">
                  <el-option v-for="item in cityOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id + ''"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item prop="address" label="客户地址">
                <el-input
                  v-model="search.address"
                  placeholder="客户地址"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item prop="remark" label="备注">
                <el-input
                  v-model="search.remark"
                  placeholder="备注"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i style="top:12px" class="el-icon-search magnifier" />
        </el-button>
        <el-button type="primary" @click="confirmHandle" >保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <dealerSelect :open-select-dealer.sync="openSelectDealer" flag="1" @dealerClose="dealerClose" @getDealerInfo="dealerInfo"/>
    <sellSelect v-if="openSelectSell" :open-select-sell.sync="openSelectSell" :dealer-code="search.dealer_code" @sellClose="sellClose" @getSellInfo="sellInfo"/>
  </div>
</template>

<script>
import { editOutClue } from '@/api/vehicle/custBiz.js'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import dealerSelect from '@/views/admin/auth/gms/userDrive/selectDealer.vue'
import sellSelect from '@/views/admin/auth/gms/userDrive/selectSell.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'AfterDealer',
  components: {
    BaseTable,
    filtercode,
    dealerSelect,
    sellSelect,
    rSelect

  },
  mixins: [formMixins],
  props: {
    dialogFormVisible: false,
    rowData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      openSelectDealer: false,
      openSelectSell: false,
      multipleSelection: [],
      search: {
        name: '',
        telephone: '',
        gender: '',
        remark: '',
        address: '',
        clue_source: '',
        clue_type: '',
        app_name: '',
        province_id: '',
        province_name: '',
        city_id: '',
        city_name: '',
        action_type: '',
        flow_type: '',
        clue_status: '',
        series_id: '',
        dealer_name: '',
        dealer_code: ''
      },
      clueStatusOptions: [{ 'value': '0', 'name': '新线索' }, { 'value': '1', 'name': '有意向' }, { 'value': '2', 'name': '无意向' }],
      clueSourceOptions: [{ 'value': '1', 'name': '字节-橙子建站' }, { 'value': '2', 'name': '其他渠道-外部导入' },
        { 'value': '5', 'name': '字节-抖音企业号' }, { 'value': '7', 'name': '字节-巨量线索' }, { 'value': '8', 'name': '字节-云店' },
        { 'value': '9', 'name': '字节-星图' }, { 'value': '10', 'name': '字节-获客宝' }, { 'value': '11', 'name': '字节-住小帮' }],
      clueTypeOptions: [{ 'value': '0', 'name': '字节-表单提交' }, { 'value': '1', 'name': '字节-在线咨询' }, { 'value': '2', 'name': '字节-智能电话' },
        { 'value': '3', 'name': '字节-网页回呼' }, { 'value': '4', 'name': '字节-卡券' }, { 'value': '5', 'name': '字节-抽奖' }],
      flowTypeOptions: [{ 'value': '1', 'name': '经营-自然流量线索' }, { 'value': '2', 'name': '经营-广告直接线索' }, { 'value': '3', 'name': '经营-广告间接线索' },
        { 'value': '4', 'name': '广告线索' }, { 'value': '5', 'name': '无' }],
      actionTypeOptions: [{ 'value': '0', 'name': '其他' }, { 'value': '1', 'name': '短视频' }, { 'value': '2', 'name': '直播' },
        { 'value': '3', 'name': '企业主页' }, { 'value': '4', 'name': '私信' }, { 'value': '5', 'name': '订阅文章' }],
      provinceOptions: [],
      cityOptions: [],
      rules: {
        name: [{
          required: true,
          message: '请输入客户名称'
        }],
        telephone: [{
          required: true,
          message: '清输入客户电话'
        }]
      }
    }
  },
  watch: {
    'search.province_id': function(val) {
      console.log(val)
      if (!val) {
        this.cityOptions = []
        this.search.city_id = ''
        this.search.city_name = ''
      }
    }
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },
  mounted() {
    this.search = Object.assign(this.search, this.rowData)
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
    const p = this.search.province_id
    this.cityOptions = this.regionMap[p].children
  },
  methods: {
    dealerInfo(dealerInfo) {
      if (dealerInfo != '') {
        this.$set(this.search, 'dealer_name', dealerInfo.DEALER_NAME)
        this.search.dealer_code = dealerInfo.DEALER_CODE
      }
    },

    cancel() {
      this.$emit('update:dialogFormVisible', false)
    },
    // 打开经销商选择框
    dealerOpen() {
      this.openSelectDealer = true
    },
    dealerClose() {
      this.openSelectDealer = false
    },
    // 销售顾问框关闭
    sellClose() {
      this.openSelectSell = false
    },
    // 发票订单选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    confirmHandle() {
      const that = this
      this.$refs['editDiaForm'].validate(valid => {
        if (valid) {
          console.log(that.search)
          if (that.search.clue_status === '1') {
            if (!that.search.series_id) {
              this.$message({
                type: 'error',
                message: '请选择产品小类'
              })
              return
            }
            if (!that.search.dealer_code) {
              this.$message({
                type: 'error',
                message: '请选择经销商'
              })
              return
            }
          }
          editOutClue(that.search).then(res => {
            that.$message.success('保存成功！')
            that.cancel()
            that.$emit('refreshEvent')
          })
        } else {
          this.$message({
            type: 'warning',
            message: '请完成填写'
          })
          this.saveLoading = false
          this.fullscreenLoading = false
        }
      })
    },
    changeProvince() {
      const p = this.search.province_id
      console.log(this.regionMap[p])
      this.cityOptions = this.regionMap[p].children
      this.search.province_name = this.regionMap[p].region_name
      this.search.city_id = ''
      this.search.city_name = ''
    },
    changeCity(e) {
      this.search.city_name = this.cityOptions[e].region_name
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
.clue-statu:hover:after {
  position: absolute;
  left: 10px;
  top: 24px;
  padding: 5px;
  background-color: #e4e7ed;
  border-radius: 3px;
  color: #F56C6C;
  content: '有意向即下发线索';
  z-index: 2;
}
</style>
